import React from 'react';
import { Outlet, Link, NavLink,useNavigate } from "react-router";
import type { Route } from "./+types/home";

// antd 
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Breadcrumb, Layout, Menu, theme } from 'antd';

export function meta({ }: Route.MetaArgs) {
  return [
    { title: "欢迎来到React Router" },
    { name: "description", content: "Welcome to React Router!" },
  ];
}


// antd layout
const { Header, Content, Sider } = Layout;
const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
  key,
  label: `nav ${key}`,
}));
const items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(
  (icon, index) => {
    const key = String(index + 1);

    return {
      key: `sub${key}`,
      icon: React.createElement(icon),
      label: `subnav ${key}`,
      children: Array.from({ length: 4 }).map((_, j) => {
        const subKey = index * 4 + j + 1;
        return {
          key: subKey,
          label: `option${subKey}`,
        };
      }),
    };
  },
);



export default function Home() {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  const navigate = useNavigate();
  //菜单选中事件
  const onSelect: MenuProps['onSelect'] = (info) => {
    console.log('选中菜单项:', info);
    console.log('info.keyPath: ', info.keyPath);
    if(parseInt(info.keyPath[0])==1){
      navigate('/')
    }else if(parseInt(info.keyPath[0])==2){
      navigate('/Cart')
    }else if(parseInt(info.keyPath[0])==3){
      navigate('/Newuser')
    }
    // 这里可以添加你的业务逻辑
    /* navigate('/Cart') */
  };

  // const onMenuSelect =({ item, key, keyPath, selectedKeys, domEvent })=>{
  //   console.log('key: ', key);
  //   console.log(123);
  //   navigate('/cart');
  // }
  return <>
    <Layout style={{ height: '100vh' }}>
      <Header style={{ display: 'flex', alignItems: 'center' }}>
        <div className="demo-logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
          items={items1}
          style={{ flex: 1, minWidth: 0 }}
        />
      </Header>
      <Layout>
        <Sider width={200} style={{ background: colorBgContainer }}>
          <Menu
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{ height: '100%', borderInlineEnd: 0 }}
            items={items2}
            onSelect={onSelect}
          />
        </Sider>
        <Layout style={{ padding: '0 24px 24px' }}>
          <Breadcrumb
            items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}
            style={{ margin: '16px 0' }}
          />
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            Content
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </>;
}
